<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' style="padding-top:20px" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right"
                 label-width="100px">
          <el-form-item label="BD部门编码">
<!--            <el-input v-model="searchFilters.bdCode" placeholder="请输入BD部门编码"></el-input>-->
            <el-select clearable placeholder="选择部门编码" v-model="searchFilters.bdCode">
              <el-option v-for="(item,index) in deptList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="部门编码：">
            <el-input v-model="searchFilters.deptId" placeholder="请输入部门编码"></el-input>
          </el-form-item> -->
             <el-form-item label="平台简称"  prop="platformCode" >
        <!-- <el-input v-model="dataForm.platformCode" placeholder="请输入"></el-input> -->
        <el-select v-model="searchFilters.platformCode" placeholder="请选择平台">
           <el-option   label="请选择"  value=""></el-option>
           <el-option v-for="item in platform"  :label="item.name" :key="item.name":value="item.id"></el-option>
        <!--    <el-option v-for="item in searchScene"  :key="item.sceneName" :label="item.sceneName" :value="item.sceneId"></el-option> -->
        </el-select>
       </el-form-item>
<!--           <el-form-item label="BD部门编码">
            <el-input v-model="searchFilters.bdCode" placeholder="请输入BD部门编码"></el-input>
          </el-form-item> -->
          <el-form-item label="活动名称：">
            <el-input v-model="searchFilters.name" placeholder="请输入活动名称"></el-input>
          </el-form-item>
          <el-form-item label="活动编码：">
            <el-input v-model="searchFilters.code" placeholder="请输入活动编码"></el-input>
          </el-form-item>
          <el-form-item label="开始日期：">
            <el-date-picker v-model="searchFilters.startTime" type="datetime" placeholder="请输入开始日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期：">
            <el-date-picker v-model="searchFilters.endTime" type="datetime" placeholder="请输入结束日期"></el-date-picker>
          </el-form-item>
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <!-- <el-button type="primary" size="small" @click="findPageApply()">待审核</el-button> -->
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                <el-button type="primary" size="small" @click="delayApplyForm(1)">延期申请</el-button>
                 <el-button type="primary" size="small" @click="advanceApplyForm(1)">提前</el-button>
                <el-button type="primary" size="small" @click="freezeApplicationForm(1)" >冻结申请</el-button>
                <el-button type="primary" size="small" @click="thawApplicationForm(1)">解冻申请</el-button>
                <el-button type="primary" size="small" @click="auditChange(1)">审核</el-button>
              </el-button-group>
            </div>
          </div>
           <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="全部" name="first"></el-tab-pane>
                    <el-tab-pane label="预审核" name="second"></el-tab-pane>
            </el-tabs>
            <!-- 提前申请 -->
                <el-dialog title="提前申请" :visible.sync="advanceApply">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="提前申请日期"  width="100%" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="提前申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="advanceApply = false">取 消</el-button>
                    <el-button type="primary" @click="advanceApplyForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
             <!-- 审核 -->
            <el-dialog title="审核" :visible.sync="auditApplication">
              <el-form :model="auditForm" ref="auditForm" :rules="rules">
              <el-form-item label="审核状态"  width="100%" prop="auditSts">
                  <el-select v-model="auditForm.auditSts" auto-complete="off">
                      <el-option label="审核通过" value="1">审核通过</el-option>
                      <el-option label="审核拒绝" value="2">审核拒绝</el-option>
                  </el-select>
              </el-form-item>
              <br>
              <br>
              <el-form-item label="审核原因"  width="100%"  prop="auditReason">
                  <el-input v-model="auditForm.auditReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
              </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
              <el-button @click="auditApplication = false">取 消</el-button>
              <el-button type="primary" @click="auditChange(2)">确 定</el-button>
              </div>
          </el-dialog>
          <el-dialog title="延期申请" :visible.sync="delayApply">
            <el-form :model="form" ref="form" :rules="rules">
              <el-form-item label="延期申请日期"  width="100%" prop="endTime">
                <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
              </el-form-item>
              <br>
              <br>
              <el-form-item label="延期申请原因"  width="100%"  prop="delayApplierReason">
                <el-input v-model="form.delayApplierReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delayApply = false">取 消</el-button>
              <el-button type="primary" @click="delayApplyForm(2)">确 定</el-button>
            </div>
          </el-dialog>
              <!-- 冻结申请 -->
                <el-dialog title="冻结申请" :visible.sync="freezeApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                          <el-option label="流入冻结,流出正常" value="-2"></el-option>
                          <el-option label="双向冻结" value="-3"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="freezeApplication = false">取 消</el-button>
                    <el-button type="primary" @click="freezeApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
              <!-- 解冻申请  -->
                 <el-dialog title="解冻申请" :visible.sync="thawApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                         <el-option label="流入正常,流出冻结" value="2"></el-option>
                         <el-option label="启用" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="thawApplication = false">取 消</el-button>
                    <el-button type="primary" @click="thawApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table :height="350" :operationWidth=300 :tableList="tableList" :tableHeaderList="tableHeaderList"
                       :totalSize="totalSize" :showDetailOperation=true :showEditOperation=true :showBatchDelete=false
                       :showSelection=true :showIndex=false :showDeleteOperation=true @findPage="findPage"
                       @handleDetail="handleDetail" @handleDelete="handleDelete" @handleEdit="handleEdit"
                       @handleSizeChange="handleSizeChange" @selectionChange="selectionChange"
                       @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //一.导包区
  import jicTable from '@/components/jicComponentGallery/jicTable';

  //二.数据输出区
  export default {
    //===== 注册组件 =====
    components: {
      jicTable,
    },
    //===== 数据初始化区=====
    data() {
      return {
        //===== 公共数据初始化 =====
        selectionChangeList: [],
        pageIndex: 0, //当前页数：首页；
        pageSize: 10, //每页记录数：10条记录；
        totalSize: 0, //总记录数：返回数据总条数
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        }, // 请求数据的参数
        tableList: [], // 表格列表数据
        searchSize: 'mini',
        deptList:[],
        action:null,//定义 当前操作类型
        selsts: null,//
        delayApply:false,//延期申请
        freezeApplication:false,//冻结申请
        thawApplication:false,//解冻申请
        auditApplication:false,//审核
        advanceApply:false,//提前申请
        activeName:'first',//默认查询
        platform:[],//平台简称
        //=====表格表头数据=====
        tableHeaderList: [
        //   {
        //   prop: "id",
        //   label: "主键",
        //   minWidth: 100,
        //   formatter: null
        // },
          {
            prop: "name",
            label: "活动名称",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "code",
            label: "活动编码",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "bdName",
            label: "部门简称",
            minWidth: 120,
            formatter: null
          },
          {
            prop: "platformName",
            label: "平台简称",
            minWidth: 100,
            formatter: null
          },
          // {
          //   prop: "description",
          //   label: "活动描述",
          //   minWidth: 100,
          //   formatter: null
          // },
          // {
          //   prop: "limited",
          //   label: "额度积分上限",
          //   minWidth: 100,
          //   formatter: null
          // },
           {
            prop: "total",
            label: "总积分",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "available",
            label: "可用积分",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "cost",
            label: "已用积分",
            minWidth: 100,
            formatter: null
          },
        
          {
            prop: "frozen",
            label: "冻结积分",
            minWidth: 100,
            formatter: null
          },
          // {
          //   prop: "unplanRelease",
          //   label: "未计划释放积分",
          //   minWidth: 100,
          //   formatter: null
          // },
          // {
          //   prop: "overtimeRelease",
          //   label: "活动过期释放积分",
          //   minWidth: 100,
          //   formatter: null
          // },
          // {
          //   prop: "invalidRelease",
          //   label: "活动失效释放积分",
          //   minWidth: 100,
          //   formatter: null
          // },
          // {
          //   prop: "startTime",
          //   label: "开始日期",
          //   minWidth: 200,
          //   formatter: null
          // },
          // {
          //   prop: "endTime",
          //   label: "结束日期",
          //   minWidth: 200,
          //   formatter: null
          // },
          {
            prop: "sts",
            label: "状态",
            minWidth: 100,
            formatter: function (row, column, sts, index) {
              if(sts == -3){
                return "双向冻结"
              } else if(sts == -2){
                return "流入冻结，流出正常"
              } else if(sts == -1){
                return "停用"
              } else if(sts == 0){
                return "待审核"
              } else if(sts == 1){
                return "启用"
              } else if(sts == 2){
                return "流入正常，流出冻结"
              }
          }
        }
        ],

        //=====搜索表单对应的数据对象初始化=====
        searchFilters: {
          bdCode: null,
          platformCode: null,
          name: null,
          code: null,
          description: null,
          limited: null,
          available: null,
          left: null,
          total: null,
          frozen: null,
          unplanRelease: null,
          overtimeRelease: null,
          invalidRelease: null,
          startTime: null,
          endTime: null,
          sts: null,
          deleteFlag: null
        },
        form: {
          id: null,
          endTime: null, //
          delayApplierReason: null, //延期审核原因
          auditReason: null,
          auditSts: null,
          currentAction:null,
        },
        auditForm:{
          id:null,
          auditSts:null,
          auditReason:null,
        },
        rules: {
          endTime: [
            { required: true, message: "请选择延期时间", trigger: "blur" }
          ],
          delayApplierReason: [
            { required: true, message: "请输入申请原因", trigger: "change" }
          ],
          applyReason:[
            {required: true, message: "请选择申请原因", trigger: "blur" }
          ],
          sts:[
            {required: true, message: "请选择申请状态", trigger: "blur" }
          ],
          auditSts:[
            {required: true, message: "请选择审核状态", trigger: "blur"}
          ],
          auditReason:[
              {required: true, message: "请选择审核原因", trigger: "blur"}
          ]

        }
        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;
      };
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
      this.findPage();
      this.getPlatform();
      this.getDeptName();
    },

    //=====Vue.js 方法区=====
    methods: {
      //tabs函数
      handleClick(tab, event){
      this.findPage();
      },
      //1.查询按钮：查询列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {};
        }
        this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
         if(this_.activeName == 'second'){
            this.utils.request.findConfActivityRuleApplyPage(this_.searchFilters, function (res) {
          if (res.code === "0000") {
            this_.tableList = res.data.list;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.tableList = [];
            this_.totalSize = 0;
          }
        });
         }else{
            this.utils.request.findConfActivityRulePage(this_.searchFilters, function (res) {
              if (res.code === "0000") {
              this_.tableList = res.data.list;
              this_.totalSize = Number(res.data.total);
            } else {
              this_.tableList = [];
              this_.totalSize = 0;
            }
          });
         }

      },
      //延期申请
      delayApplyForm(num) {
        if(num == 1){
          let this_ = this;
          if (this_.selectionChangeList.length < 1) {
            this_.$message({message: "必须选中一条数据", type: "warning"});
            return false;
          }
          this_.form.id = this_.selectionChangeList[0].id;
          this_.delayApply = true;
        }else if(num == 2){
          let this_ = this;
          this_.$refs.form.validate(valid => {
            if (valid) {
              this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let this_ = this;
                let params = {};
                if (this_.delayApply) {
                  params = Object.assign({}, this.form)
                  this.utils.request.findConfActivityRuleApplyDelay(params, function(res) {
                    if (res.code == "0000") {
                      this_.dataForm = {};
                      this_.findPage(null);
                      this_.delayApply = false;
                      this_.$message({ message: "操作成功", type: "success" });
                    } else {
                      this_.$message({
                        message: "操作失败, " + res.msg,
                        type: "error"
                      });
                    }
                  });
                }
              });
            }
          });


        }

      },
      //冻结申请
      freezeApplicationForm(num){
            if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                this_.form.id = this_.selectionChangeList[0].id;
                this_.freezeApplication = true;
                }else if(num == 2){
                let this_ = this;
                this_.$refs.form.validate(valid => {
                    if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let this_ = this;
                        let params = {};
                        if (this_.freezeApplication) {
                        params = Object.assign({}, this.form)
                        this.utils.request.freezeApplicationConfActivityRule(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.freezeApplication = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            },
      //解冻申请
      thawApplicationForm(num){
            if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                this_.form.id = this_.selectionChangeList[0].id;
                this_.thawApplication = true;
                }else if(num == 2){
                let this_ = this;
                this_.$refs.form.validate(valid => {
                    if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let this_ = this;
                        let params = {};
                        if (this_.thawApplication) {
                        params = Object.assign({}, this.form)
                        this.utils.request.freezeApplicationConfActivityRule(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.thawApplication = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            },
      //提前申请
      advanceApplyForm(num) {
                if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                this_.form.id = this_.selectionChangeList[0].id;
                this_.advanceApply = true;
                }else if(num == 2){
                let this_ = this;
                this_.$refs.form.validate(valid => {
                    if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let this_ = this;
                        let params = {};
                        if (this_.advanceApply) {
                        params = Object.assign({}, this.form)
                        this.utils.request.advanceApplyConfActivityRule(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.advanceApply = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            },
      // 显示审核and提交
      auditChange(num){
            if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                debugger
                this_.auditApplication = true;
                }else if(num == 2){
                let this_ = this;
                this_.$refs.auditForm.validate(valid => {
                    if (valid) {
               this.$confirm("确认提交吗？", "提示", {}).then(() => {
                this_.selectionChangeList.forEach(item=>{
                       let params = item;
                        params.auditSts = this_.auditForm.auditSts;
                        params.auditReason = this_.auditForm.auditReason;
                        debugger



                        this.utils.request.auditAubmitConfPlat(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.advanceApply = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
              });
                    });
                    }
                });
                }
            },
      selectionChange(params) {
        this.selectionChangeList = params.selections;
        for (let i = 0; i < this.selectionChangeList.length; i++) {
        }
      },
      // 2.重置按钮：无条件查询搜索框条件
      resetForm(formName) {
        this.searchFilters = {};
        this.findPage(null);
      },

      // 3.详情按钮对应的方法
      handleDetail(params) {
        this.$router.push({
          path: "/ConfActivityRuleDetail/",
          query: {
            id: params.row.id,
            disabled: true,
            selsts:this.selsts,
            activeName:this.activeName,
            action:"select"
          }
        });
      },

      // 4.编辑按钮对应的方法
      handleEdit(params) {
        let this_ = this;
        this.$router.push({
          path: "/ConfActivityRuleDetail/",
          query: {
            id: params.row.id,
            disabled: false,
            selsts:this.selsts,
            activeName:this.activeName,
            action:"update"
          }
        });
      },

      // 5.跳转到新增记录页面；
      addForm(params) {
        params = {
          row: {
            id: null
          }
        };
        this.$router.push({
          path: "/ConfActivityRuleDetail/",
          query: {
            id: params.row.id,
            disabled: false,
            action:"insert"
          }
        });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
      // 8.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

      // 9.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      // 10.删除按钮：删除选中的记录
      handleDelete(data) {
        this.utils.request.deleteConfActivityRule(
          {
            id: data.row.id
          },
          res => {
            if (res.data) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.findPage();
            } else {
              this.$message({
                message: "删除失败",
                type: "warning"
              });
            }
          }
        );
      },
          /**查询子平台列表 */
    getPlatform(){
      let this_ = this;
      this_.utils.request.getPlatformName(null, function(res) {
              if (res.code === "0000") {
                this_.platform = res.data;
              } else {
                this_.$message({ message: "操作失败", type: "error" });
              }
            });
    },
    getDeptName() {
      let this_ = this
      //let param = this.dataForm;
      this.utils.request.DepartmentNameInquiry({}, function (res) {
        debugger
        this_.deptList = res.data
        console.log(this_.deptList)
      });
    },
      //==========Vue.js自定义方法区==========
    }
  };
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
